<template>
	<view class="jobLisPage">
		<!-- <image src="/static/image/userImg/bg.png" mode="" class="bgImg"></image> -->
		<view class="searchBox pL15 pR15 bgf pB10">
			<view class="flex jst-between alg-center">
				<u-search style="width: calc(100% - 60rpx);" placeholder="搜索职位" v-model="query.oddJobName" height="80"
					:show-action="false" bg-color="#F7F8FB" shape="square" @search='search'>
				</u-search>
				<image v-if="selColor" src="/static/image/selSelect.png" mode="" class="selImg mL10"
					@click="openJobSel"></image>
				<image v-else src="/static/image/selIcon.png" mode="" class="selImg mL10" @click="openJobSel"></image>

			</view>
			<view class="flex alg-center jst-between mT20">
				<block v-for="(item,i) in tabLis" :key="i">
					<view @click="changeTab(item,i)" class="tabItem font32" :class="curretnTab==i?'active':''">
						<text class="relative">{{item.text}}</text>
					</view>
				</block>
			</view>
		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="210">
			<view class="pB15 mL15 mR15">
				<view class="oddItem mB15" v-for="(item,i) in list" :key="i">
					<view class="flex  alg-center jst-between" @click.stop="xf.onlineUtils.route(`pages/common/workDetail/index?id=${item.id}`)">
						<view class="w75 flex alg-center">
							<text class="jobTitle" :class="xf.getItemClass(item)">{{item.oddJobName}}</text>
							<u-tag v-if="item.izUrgent==1" :text="item.izUrgentText" bg-color="#fff" class="jpTag" :color="'#FF0000'" :border-color="'#FF0000'"
								 />
							<u-tag v-if="item.recruitmentCarefree&&item.recruitmentCarefree.indexOf('10')>=0" text="用工无忧" bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'"
								 />	
							
						</view>
						<view class="u-blue  font15 ">{{item.groundingStateText}}</view>
					</view>
					<view class="flex alg-center flex-wrap">
						<view class="greyTag">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</view>
						<view class="greyTag" v-show="item.salaryPaymentText">{{item.salaryPaymentText}}</view>
						<view class="greyTag">招{{item.oddJobUseNum}}人</view>
					</view>
					<view v-if="item.type!=0" class="flex jobInfo mT10 pT15 pB15 pL10 pR10">
						<view class="w20" @click.stop="xf.onlineUtils.route(`pages/companyPage/subpackge/my/myPublishDetail/index?id=${item.id}&current=0`)">
							<view class="t-center font21 bold">{{item.dispatchWork?item.dispatchWork:0}}</view>
							<view class="t-center font13 u-6 mT5">待派工</view>
						</view>
						<view class="w20" @click.stop="xf.onlineUtils.route(`pages/companyPage/subpackge/my/myPublishDetail/index?id=${item.id}&current=1`)">
							<view class="t-center font21 bold">{{item.hire?item.hire:0}}</view>
							<view class="t-center font13 u-6 mT5">已录用</view>
						</view>
						<view class="w20" @click.stop="xf.onlineUtils.route(`pages/companyPage/subpackge/my/myPublishDetail/index?id=${item.id}&current=2`)">
							<view class="t-center font21 bold">{{item.perform?item.perform:0}}</view>
							<view class="t-center font13 u-6 mT5">进行中</view>
						</view>
						<view class="w20" @click.stop="xf.onlineUtils.route(`pages/companyPage/subpackge/my/myPublishDetail/index?id=${item.id}&current=3`)">
							<view class="t-center font21 bold">{{item.settlement?item.settlement:0}}</view>
							<view class="t-center font13 u-6 mT5">待结算</view>
						</view>
						<view class="w20" @click.stop="xf.onlineUtils.route(`pages/companyPage/subpackge/my/myPublishDetail/index?id=${item.id}&current=4`)">
							<view class="t-center font21 bold">{{item.complete?item.complete:0}}</view>
							<view class="t-center font13 u-6 mT5">已完成</view>
						</view>
					</view>

					<view class="flex alg-center mT15 jst-end">
						<block v-if="item.groundingState==1">
							<view class="flex alg-center w33 jst-center u-border-right" @click.stop="xf.onlineUtils.route(`pages/common/publishPage/index?id=${item.id}`)">
								<image class="imgW32" :src="resources.editBlue" mode=""></image>
								<text class="font13 u-6  mL5">编辑</text>
							</view>
							<view class="flex alg-center" @click.stop="xf.onlineUtils.route(`/pages/common/pubJobPay/index?oddJobId=${item.id}`)">
								<image class="imgW32" :src="resources.fbIcon" mode=""></image>
								<text class="font13 u-6  mL5">去支付</text>
							</view>
						</block>
						<block v-if="item.groundingState==0">
							<view class="flex alg-center" @click.stop="upShelevesOpt(item)">
								<image class="imgW32" :src="resources.xjIcon" mode=""></image>
								<text class="font13 u-6  mL5">下架</text>
							</view>
						</block>
						<block v-if="item.groundingState==2||item.groundingState==3">
							<view class="flex alg-center w33 jst-center u-border-right" @click.stop="xf.onlineUtils.route(`pages/common/publishPage/index?id=${item.id}`)">
								<image class="imgW32" :src="resources.editBlue" mode=""></image>
								<text class="font13 u-6  mL5">编辑</text>
							</view>
							<view @click.stop="upShelevesOpt(item)" class="flex alg-center w33 jst-center u-border-right" v-if="item.groundingState==2">
								<image class="imgW32" :src="resources.sjIcon" mode=""></image>
								<text class="font13 u-6  mL5">上架</text>
							</view>

							<view class="flex alg-center w33 jst-center u-border-right" v-if="item.groundingState==3">
								<image class="imgW32" :src="resources.freshIcon" mode=""></image>
								<text class="font13 u-6  mL5">刷新</text>
							</view>
							<view class="flex alg-center w33 jst-center" @click.stop="deleteJobOpt(item)">
								<image class="imgW32" :src="resources.deleteIcon" mode=""></image>
								<text class="font13 u-6  mL5">删除</text>
							</view>
						</block>


					</view>
				
				</view>


			</view>
		</mescroll-uni>
		<xfTipModal ref="tipModal"></xfTipModal>
		<jobSel ref="jobSel" @checkSel="checkSel"></jobSel>
	</view>
</template>

<script>
	import jobSel from "@/components/job/jobSel/index.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getLocal
	} from "@/libs/map.js"
	import {
		myFbMore,
		upShelves,
		deleteJob
	} from '@/api/companyInterface/user.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			jobSel
		},
		data() {
			return {
				
				query: {
					groundingState: "",
					oddJobName: "",
					salaryPayment: "",
					workWay: "",
					izTools: "",
					pageSize: 10,
					pageNo: 1,
					staSalary:'',
					endSalary:'',
					staJobNum:'',
					endJobNum:''
				},
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				curretnTab: 0,
				tabLis: [],
				selColor: false

			};
		},
		onShow(e) {
			this.getJobStatus()
			this.mescroll.triggerDownScroll()
		},
		methods: {
			getJobStatus() {
				this.tabLis = [{
					text: '全部',
					value: ''
				}]
				this.baseStore.getDictionaryDataAll('jjp_oddjob_grounding_state').then(res => {
					let d = res.sort((a, b) => a.value - b.value)
					this.tabLis = this.tabLis.concat(this.xf.deepClone(d))
					console.log(this.tabLis)
				})

			},
			changeTab(v, i) {
				console.log(v)
				this.curretnTab = i;
				this.query.groundingState = v.value;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			//删除
			deleteJobOpt(v){
				let that=this;
				this.$refs.tipModal.open({
					btnText:"删除",
					content:"确认删除该职位吗?",
					showCanel: true,
					success: function() {
						deleteJob({id:v.id}).then(res => {
							that.xf.onlineUtils.toast("删除成功!")
							that.list = [];
							that.mescroll.resetUpScroll();
							
						})
					}
				})
			},
			//上架，下架
			upShelevesOpt(v) {
				let that=this;
				this.$refs.tipModal.open({
					btnText:v.groundingState==0?"下架":"上架",
					content:v.groundingState==0?"确认下架该职位吗?":"确认上架该职位吗?",
					showCancel: true,
					success: function() {
						upShelves({
							"xfOddjobInfoId": v.id,
							"groundingState":v.groundingState==0?2:0,
							"groundingStateText":v.groundingState==0?'已下架':'招聘中'
						}).then(res => {
							if(v.groundingState==0){
								that.xf.onlineUtils.toast("下架成功!")
								v.groundingStateText="已下架";
								v.groundingState=2;
							}else{
								that.xf.onlineUtils.toast("上架成功!")
								v.groundingStateText="招聘中";
								v.groundingState=0;
							}
						})
					}
				})
			},
			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
				
			},
			//打开筛选弹窗
			openJobSel() {
				this.$refs.jobSel.openPoup()
			},
			changeValue(v) {
				this.query[v.type] = v.value;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			checkSel(v) {
				this.query = {
					...this.query,
					...v
				};
				this.list = [];
				this.mescroll.resetUpScroll();
				for (let k in v) {
					if (v[k]) {
						this.selColor = true;
						return
					} else {
						this.selColor = false
					}
				}

			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num;
				myFbMore(this.query).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})

			},
		}
	};
</script>
<style lang="scss">
page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style scoped lang="scss">
	.jobInfo {
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.jobName {
		max-width: 340rpx;
	}

	.oddItem {
		padding: 34rpx 28rpx;
		background: #FFFFFF;
		// box-shadow: 1rpx 0rpx 10rpx 0rpx #000000;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.selImg {
		width: 40rpx;
		height: 40rpx;
	}

	.tabItem {
		margin-right: 58rpx;
		position: relative;

		.relative {
			z-index: 1;
		}

		&:first-child {
			margin-left: 20rpx;
		}

		&:last-child {
			margin-right: 30rpx;
		}

		&.active {
			font-weight: bold;

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				z-index: 0;
				width: 100%;
				height: 10rpx;
				background: linear-gradient(to right, #3291F8, #E4F1FE);
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}


	#scroll-view-h {
		/* #ifdef MP-WEIXIN */
		// height: calc(100vh - 240rpx);
		/* #endif */
		/* #ifdef H5 */
		// height: 100%;
		/* #endif */

	}


	.searchBox {
		position: relative;
		z-index: 1;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
</style>